<template>
	<view class="columnbox wdh-100 content" v-if="info">
		<view class="rowbox one-info spb">
			<view class="rowbox">
				<image :src="user.logo" mode="aspectFill" class="user-img"></image>
				<view class="name">{{user.name}}</view>
			</view>
			<view class="reg-time">{{getDate(info.addtime)}}</view>
		</view>
		<view class="columnbox one-info spb">
			<view class="wdh-100 title">商品明细</view>
			<view class="rowbox wdh-100 spb">
				<view class="s-title">推荐单状态</view>
				<view class="s-title">{{info.status}}</view>
			</view>
			<view class="g-box rowbox wdh-100 spb" v-for="(item,index) in List" :key='index'>
				<image :src="item.images.split(',')[0]" mode="aspectFill" class="goods-img"></image>
				<view class="columnbox als goods-info" style="width: 380rpx;">
					<view class="type-name">{{item.name}}
					</view>
					<view class="changjia">{{item.changjia}} </view>
					<view class="changjia">{{item.guige}}*{{item.danwei}} </view>
				</view>
				<view class="columnbox als goods-info" style="width: 100rpx;align-items: flex-end">
					<view class="price">¥{{item.price}} </view>
					<view class="changjia" style="margin-top: 40rpx;">x{{item.num}} </view>
				</view>
			</view>
		</view>
		<view class="columnbox one-info spb">
			<view class="wdh-100 title">推荐单明细</view>
			<view class="rowbox wdh-100 spb">
				<view class="s-title">订单合计</view>
				<view class="s-title">￥{{totalPrice}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import time from '@/utils/time.js'
	export default {
		data() {
			return {
				id: 0,
				user: null,
				info: null,
				List: []
			};
		},
		onLoad(options) {
			this.id = options.id * 1
			this.getDetail()
		},
		computed: {
			totalPrice() {
				let price = 0
				if (this.List.length > 0) {
					this.List.forEach(v => {
						price += v.price * v.num
					})
				}
				return price
			},
			orderStatus() {
				let status = ''
				switch (this.info.status) {
					case 1:
						status = '未支付'
						break;
					case 2:
						status = '已付款'
						break;
					case 3:
						status = '待发货'
						break;
					case 4:
						status = '待收货'
						break;
					case 5:
						status = '已完成'
						break;
					case 6:
						status = '申请退款'
						break;
					case 7:
						status = '同意退款'
						break;
					default:
						status = '已取消'
						break;
				}
				return status
			}
		},
		methods: {
			getDate(v) {
				return time.toLocalDate(v)
			},
			getDetail() {
				this.$req.post('/doctor/goodorderinfo', {
					id: this.id
				}).then(res => {
					this.user = res.data.data.User
					this.info = res.data.data
					this.List = res.data.data.List
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F8FB;
		justify-content: flex-start;
	}

	.one-info {
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx;
		width: 710rpx;
		margin: 10rpx 0;
	}

	.user-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.name {
		font-size: 28rpx;
	}

	.reg-time {
		font-size: 28rpx;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: #F5F8FB solid 1px;
		margin-bottom: 20rpx;
	}

	.s-title {
		font-size: 28rpx;
	}

	.g-box {
		padding: 20rpx 0;
		border-bottom: #F5F8FB solid 1px;
	}

	.goods-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.goods-info {}

	.changjia {
		font-size: 24rpx;
		line-height: 40rpx;
		color: #9d9fa1;
	}

	.price {
		font-size: 32rpx;
		color: #fc1f10;
		font-weight: bold;
	}

	.type-name {
		font-size: 32rpx;
		line-height: 40rpx;
	}

	.type-price {
		margin-top: 20rpx;
		color: #989DAB;

		text {
			color: #fc1f10;
			margin-right: 10rpx;
		}
	}
</style>